<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">销量统计表</div>
      <div class="sub_title">1901 - 1914 服装销量统计表</div>
      <slot name="title"></slot>
    </div>
    <div id="funnel_basic" style="width: 100%"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import { DataView } from '@antv/data-set';
export default {
  data() {
    return {
      chart: null,
      dataList: [
        { type: "衣服", nums: 28 },
        { type: "裤子", nums: 32 },
        { type: "衬衫", nums: 40 },
        { type: "毛衣", nums: 18 },
        { type: "T恤", nums: 52 },
        { type: "围巾", nums: 15 },
      ],
    };
  },
  created() {
    // 模拟数据变化
    setTimeout(() => {
      this.dataList.push(
        { type: "帽子", nums: 8 },
        { type: "皮鞋", nums: 11 }
      );
    }, 2000);
  },
  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "funnel_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
      // 图表的外侧内边距
      padding: [40, 80, 80, 80],
    });
    
    this.chart.data( this.transformData(this.dataList) );
    // 漏斗图其实就是变换坐标系和图形的柱状图
    this.chart.coordinate('rect')
              // x 轴 与 y 轴置换
              .transpose()
              // 同 transform 的 scale ,这里将 y 坐标变化为 -y
              .scale(1,-1)
    // 不显示坐标轴 
    this.chart.axis(false);

    this.chart.tooltip({
      // 不显示 Marker 点
      showMarkers: false,
    })
    
    this.chart.interaction('element-active');

    this.chart.interval()
              .position("type*nums")
              // 数据居中对齐
              .adjust("symmetric")
              // 图形设置为漏斗
              .shape('funnel')
              // 这里利用 color 区分类别 funnel 图形会自动连接不同类型的图形
              .color('type')
              .label("type*percent",(type,percent)=>({
                content:`${type} ${(percent*100).toFixed(2)}%`,
                position:'middle'
              }))
    // 渲染图表
    this.chart.render();
  },
  watch: {
    // 监听图表变化更新数据
    dataList(newValue) {
      console.log(newValue);
      this.chart.changeData( this.transformData(newValue) );
    },
  },
  methods:{
    // 数据变换
    transformData(){
      const dv = new DataView().source(this.dataList)
      dv.transform({
        type:'sort',
        callback(a,b){
          return b.nums - a.nums
        }
      }).transform({
        type:'percent',
        field:"nums",
        dimension:"type",
        as:"percent"
      })
      return dv.rows
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>